<template>
  <div class="app-container">
    <el-card class="box-card">
      <header>
        <div class="flex">
          <el-date-picker
            style="width: 17%"
            v-model="listQuery.add_time"
            type="date"
            placeholder="添加时间"
          ></el-date-picker>
          <el-input
            v-model="listQuery.name"
            class="ml-4"
            style="width: 17%"
            placeholder="主题名称"
          ></el-input>
          <el-input
            v-model="listQuery.buy_user_name"
            class="ml-4"
            style="width: 17%"
            placeholder="用户昵称"
          ></el-input>
        </div>
        <div class="flex mt-3 mb-3">
          <el-input
            v-model="listQuery.day"
            placeholder="天数"
            class=""
            style="width: 17%"
          ></el-input>
          <el-input
            v-model="listQuery.price"
            placeholder="价格"
            class="ml-4"
            style="width: 17%"
          ></el-input>
          <el-input
            v-model="listQuery.buy_user_id"
            class="ml-4"
            style="width: 17%"
            placeholder="ID"
          ></el-input>
          <div class="ml-4 flex items-center" style="width: 17%">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="primary" @click="resetClick">重置</el-button>
          </div>
        </div>

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="序号" width="80"></el-table-column>
          <el-table-column prop="buy_user_id" label="ID"></el-table-column>
          <el-table-column prop="buy_user_name" label="昵称"></el-table-column>
          <el-table-column
            prop="room_background_name"
            label="购买主题"
          ></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="day" label="天数"></el-table-column>
          <el-table-column prop="picture" label="展示图片">
            <template slot-scope="scope">
              <el-popover placement="top" max-width="420" trigger="hover">
                <img
                  :src="scope.row.picture"
                  alt=""
                  style="max-width: 200px; max-height: 200px"
                />
                <img
                  slot="reference"
                  :src="scope.row.picture"
                  alt=""
                  style="width: 50px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="special" label="效果">
            <template slot-scope="{ row }">
              <el-popover placement="top" max-width="420" trigger="hover">
                <img
                  :src="row.effect_picture"
                  alt=""
                  style="max-width: 200px; max-height: 200px"
                />
                <img
                  slot="reference"
                  :src="row.effect_picture"
                  alt=""
                  style="width: 50px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="add_time" label="购买时间"></el-table-column>
        </el-table>
        <cus-pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="handleGetData"
        />
      </header>
    </el-card>
  </div>
</template>

<script>
import { getLogData } from "@/api/room/backgroundManage";

export default {
  name: "goodNumberRecord",
  data() {
    return {
      listQuery: {
        name: undefined,
        add_time: undefined,
        price: undefined,
        day: undefined,
        buy_user_id: undefined,
        buy_user_name: undefined,
        page: 1,
        perPage: 10
      },
      loading: false,
      total: 10,
      tableData: []
    };
  },
  created() {
    this.handleGetData();
  },
  methods: {
    handleGetData() {
      getLogData(this.listQuery).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.meta.total;
      });
    },
    handleSearch() {
      this.listQuery.page = 1;
      this.handleGetData();
    },
    resetClick() {
      this.listQuery = {
        name: undefined,
        add_time: undefined,
        price: undefined,
        day: undefined,
        buy_user_id: undefined,
        buy_user_name: undefined,
        page: 1,
        perPage: 10
      };
    }
  }
};
</script>

<style></style>
